<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能推荐</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 修改整体配色和样式 */
        body {
            background-color: #fffbf0;
            color: #333;
        }

        .chat-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 30px;
            border: 1px solid #f0e0b2;
            border-radius: 12px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(240, 224, 178, 0.3);
        }
        
        .chat-messages {
            height: 600px;
            overflow-y: auto;
            padding: 20px;
            border: 1px solid #f0e0b2;
            border-radius: 8px;
            background-color: #fffdf7;
            margin-bottom: 20px;
        }
        
        .message {
            margin: 12px 0;
            padding: 12px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .user-message {
            background-color: #fff7e6;
            margin-left: 20%;
            border-left: 4px solid #ffd591;
        }
        
        .ai-message {
            background-color: #fffbf0;
            margin-right: 40%;
            border-left: 4px solid #ffc069;
            max-width: 500px;
        }
        
        .input-container {
            display: flex;
            gap: 12px;
            padding: 10px;
            background-color: #fffdf7;
            border-radius: 8px;
        }
        
        #userInput {
            flex: 1;
            padding: 12px;
            border: 2px solid #ffd591;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        #userInput:focus {
            outline: none;
            border-color: #ffc069;
            box-shadow: 0 0 5px rgba(255, 192, 105, 0.3);
        }
        
        button {
            padding: 12px 24px;
            background-color: #ffc069;
            color: #333;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        button:hover {
            background-color: #ffa940;
            transform: translateY(-1px);
        }
        
        .recommendation-reason {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #fff7e6;
            border-radius: 6px;
            font-size: 13px;
            line-height: 1.4;
            color: #333;
            border-left: 3px solid #ffd591;
        }
        
        .recommended-products {
            margin-top: 10px;
            padding: 10px;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 4px rgba(240, 224, 178, 0.2);
            width: fit-content;
        }
        
        .product-card {
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(240, 224, 178, 0.3);
            transition: all 0.3s ease;
            cursor: pointer;
            width: 160px;
            margin: 0;
        }
        
        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(240, 224, 178, 0.4);
        }
        
        .product-info {
            padding: 8px;
            text-align: left;
            background-color: #fff;
        }
        
        .product-name {
            color: #333;
            font-size: 13px;
            margin-bottom: 6px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 32px;
            line-height: 1.2;
        }
        
        .price-container {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 3px;
            justify-content: flex-start;
        }
        
        .product-price {
            color: #f5222d;
            font-size: 15px;
            font-weight: bold;
        }
        
        .original-price {
            color: #999;
            font-size: 11px;
            text-decoration: line-through;
        }
        
        .product-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
            display: block;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <h1>AI智能推荐</h1>
        <div class="chat-messages" id="chatMessages">
            <div class="message ai-message">
                您好，我是AI智能商品推荐助手，描述你想要的商品吧!
            </div>
        </div>
        <div class="input-container">
            <input type="text" id="userInput" placeholder="请输入您的问题...">
            <button onclick="sendMessage()">发送</button>
            <button onclick="history.back()">返回</button>
        </div>
    </div>

    <script>
        // 添加对话历史数组
        let chatHistory = [];

        function sendMessage() {
            const input = document.getElementById('userInput');
            const message = input.value.trim();
            
            if (message) {
                addMessage(message, 'user');
                const loadingId = addMessage('正在为您搜索好物...', 'ai');
                
                $.ajax({
                    url: '/api/ai/chat',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ message: message }),
                    success: function(response) {
                        console.log('完整应:', response);
                        
                        $('#' + loadingId).remove();
                        
                        if (response.state === 1) {
                            // 注意这里的数据结构层级
                            const data = response.data.data;
                            console.log('解析的数据:', data);
                            
                            if (data && data.products) {
                                const products = data.products;
                                const reason = data.reason;
                                console.log('推荐理由:', reason);
                                console.log('商品数据:', products);
                                
                                if (products.length > 0) {
                                    const product = products[0];
                                    const productHtml = `
                                        <div class="message ai-message">
                                            <div class="recommendation-reason">
                                                ${reason}
                                            </div>
                                            <div class="recommended-products">
                                                <div class="product-card" onclick="location.href='product-detail.html?id=${product.id}'">
                                                    <img src="${product.firstImage}" alt="${product.name}" class="product-image"
                                                         onerror="this.src='default-product.jpg'">
                                                    <div class="product-info">
                                                        <div class="product-name">${product.name}</div>
                                                        <div class="price-container">
                                                            <span class="product-price">¥${product.price.toFixed(2)}</span>
                                                            ${product.originalPrice ? `<span class="original-price">¥${product.originalPrice.toFixed(2)}</span>` : ''}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                    
                                    $('#chatMessages').append(productHtml);
                                    $('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
                                }
                            } else {
                                addMessage('抱歉，没有找到相关商品', 'ai');
                            }
                        } else {
                            addMessage('抱歉，发生了错误', 'ai');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', error);
                        $('#' + loadingId).remove();
                        addMessage('抱歉，请求失败', 'ai');
                    }
                });

                input.value = '';
            }
        }
        
        function addMessage(text, sender) {
            const messagesDiv = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            const id = 'msg-' + Date.now();
            messageDiv.id = id;
            messageDiv.className = `message ${sender}-message`;
            messageDiv.textContent = text;
            messagesDiv.appendChild(messageDiv);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
            return id;
        }
        
        // 监听回车键发送消息
        document.getElementById('userInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html> 